<template>
  <div>
    <PageWrapper dense fixedHeight>
      <div style="background-color: #fff; padding: 10px 0">
        <a-row :gutter="15">
          <a-col :span="16">
            <a-card title="到报及畅通率统计" :bordered="true">
              <a-row justify="space-between">
                <a-statistic
                  title="应有条数"
                  :value="
                    statisticsResult !== null &&
                    statisticsResult.recordsts['ratests'] &&
                    statisticsResult.recordsts !== null
                      ? statisticsResult.recordsts['duecount']
                      : '--'
                  "
                />

                <a-statistic
                  title="实有条数"
                  :value="
                    statisticsResult !== null &&
                    statisticsResult.recordsts['ratests'] &&
                    statisticsResult.recordsts !== null
                      ? statisticsResult.recordsts['realcount']
                      : '--'
                  "
                />

                <a-statistic
                  title="缺报条数"
                  :value="
                    statisticsResult !== null &&
                    statisticsResult.recordsts['ratests'] &&
                    statisticsResult.recordsts !== null
                      ? statisticsResult.recordsts['lostcount']
                      : '--'
                  "
                  @click="openTimeDataModal('losttms')"
                  :valueStyle="returnHoverHand('ratests')"
                />

                <a-statistic
                  title="误点条数"
                  :value="
                    statisticsResult !== null &&
                    statisticsResult.recordsts !== null &&
                    statisticsResult.recordsts['ontimests']
                      ? statisticsResult.recordsts['mistimecount']
                      : '--'
                  "
                  @click="openTimeDataModal('mistms')"
                  :valueStyle="returnHoverHand('ontimests')"
                />

                <a-statistic
                  :value="returnPercentage('ratests')"
                  :valueStyle="returnPercentageStyle('ratests')"
                >
                  <template #title>
                    <span>到报率</span>
                    <a-tooltip placement="top">
                      <template #title>
                        <span>到报率=实有条数/应有条数</span>
                      </template>
                      <QuestionCircleOutlined style="margin-left: 5px" />
                    </a-tooltip>
                  </template>
                  <template #suffix>
                    <div
                      style="font-size: 14px"
                      v-if="
                        statisticsResult !== null &&
                        statisticsResult.recordsts !== null &&
                        statisticsResult.recordsts['ratests'] &&
                        statisticsResult.recordsts['duecount'] > 0
                      "
                    >
                      %</div
                    >
                  </template>
                </a-statistic>

                <a-statistic
                  :valueStyle="returnPercentageStyle('ontimests')"
                  :value="returnPercentage('ontimests')"
                >
                  <template #title>
                    <span>畅通率</span>
                    <a-tooltip placement="top">
                      <template #title>
                        <span>畅通率=（应有条数-缺报条数-误点条数）/应有条数</span>
                      </template>
                      <QuestionCircleOutlined style="margin-left: 5px" />
                    </a-tooltip>
                  </template>
                  <template #suffix>
                    <div
                      v-if="
                        statisticsResult !== null &&
                        statisticsResult.recordsts !== null &&
                        statisticsResult.recordsts['ontimests'] &&
                        statisticsResult.recordsts['duecount'] > 0
                      "
                      style="font-size: 14px"
                    >
                      %</div
                    >
                  </template>
                </a-statistic>
              </a-row>
            </a-card>
          </a-col>
          <!-- 如果有状态统计结果单独使用一行显示 -->
          <a-col
            :span="8"
            v-if="
              statisticsResult &&
              statisticsResult.statusts &&
              statisticsResult.statusts.length > 0x0
            "
          >
            <a-collapse>
              <a-collapse-panel
                v-for="(statusResult, index) in statisticsResult.statusts"
                :key="index"
                :header="statusResult.key"
              >
                <a-row justify="space-between">
                  <div v-for="statusResultValue in statusResult.value">
                    <a-statistic
                      :title="statusResultValue.key"
                      :value="statusResultValue.value"
                      style="margin-right: 10px"
                    >
                      <template #suffix>
                        <div style="font-size: 1px; color: #000">条</div>
                      </template>
                    </a-statistic>
                  </div>
                </a-row>
              </a-collapse-panel>
            </a-collapse>
          </a-col>
        </a-row>
      </div>
      <BasicTable @register="registerTableDataValue">
        <template #nameAndUnit="{ record }">
          <template v-if="record.unit !== null">
            <span>{{ record.name + '(' + record.unit + ')' }}</span>
          </template>
          <template v-else>
            {{ record.name }}
          </template>
        </template>
      </BasicTable>
      <TimeArrayModal @register="registerTimeArrayModal" />
    </PageWrapper>
  </div>
</template>
<script lang="ts">
  import { defineComponent, watch, onMounted, ref } from 'vue';
  import { BasicForm } from '/@/components/Form/index';
  import { BasicTable, useTable } from '/@/components/Table';
  import { dataValueColumns } from './exchangeData.data';
  import { PageWrapper } from '/@/components/Page';
  import TimeArrayModal from './TimeArrayModal.vue';
  import { useModal } from '/@/components/Modal';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { OperationTypeEnum } from '/@/enums/appEnum';
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'DataStatisticsResult',
    props: ['statisticsResult'],
    components: { BasicForm, BasicTable, PageWrapper, TimeArrayModal, QuestionCircleOutlined },
    setup(props, {}) {
      const [registerTableDataValue, { setTableData: setTableDataValue }] = useTable({
        title: '数据值统计结果',
        columns: dataValueColumns,
        showIndexColumn: false,
        bordered: true,
      });
      // 查看缺失/误点数据时间集合弹窗
      const [registerTimeArrayModal, { openModal: openTimeArrayModal }] = useModal();
      function setAllTableData(statisticsResult) {
        setTableDataValue([]);
        if (statisticsResult !== null) {
          setTableDataValue(statisticsResult.valuests);
          console.log(statisticsResult, 'props');
        }
      }
      function openTimeDataModal(title) {
        if (props.statisticsResult === null || props.statisticsResult.recordsts === null) return;
        let modalTitle = '';
        let timeArray = [];
        if (
          title === 'losttms' &&
          props.statisticsResult.recordsts['lostcount'] ==
            props.statisticsResult.recordsts['duecount'] &&
          props.statisticsResult.recordsts['lostcount'] > 0
        ) {
          timeArray.unshift('全部缺失');
          let propsData: QcUnifyTransToChildProps = {
            moduleName: '缺失数据时间集合',
            timeArray: timeArray.join('\n'),
            operateString: '查看',
          };
          openTimeArrayModal(true, propsData);
        }
        if (
          title === 'mistms' &&
          props.statisticsResult.recordsts['mistimecount'] ==
            props.statisticsResult.recordsts['duecount'] &&
          props.statisticsResult.recordsts['mistimecount'] > 0
        ) {
          if (
            props.statisticsResult.recordsts['lostcount'] ==
            props.statisticsResult.recordsts['duecount']
          ) {
            timeArray.unshift('全部缺失');
          } else if (
            props.statisticsResult.recordsts['realcount'] ==
            props.statisticsResult.recordsts['duecount']
          ) {
            timeArray.unshift('全部误点');
          } else {
            timeArray.unshift('全部缺失/误点');
          }
          let propsData: QcUnifyTransToChildProps = {
            moduleName: '误点数据时间集合',
            timeArray: timeArray.join('\n'),
            operateString: '查看',
          };
          openTimeArrayModal(true, propsData);
        }
        if (
          props.statisticsResult.recordsts[title] &&
          props.statisticsResult.recordsts[title].length > 0
        ) {
          if (title === 'losttms') {
            modalTitle = '缺失数据时间集合';
            timeArray = props.statisticsResult.recordsts[title];
          } else {
            modalTitle = '误点数据时间集合';
            timeArray = props.statisticsResult.recordsts[title].map((item) => {
              let tmp = '';
              for (var key in item) {
                tmp = key + '--' + (item[key] == '' ? '数据缺失' : item[key]);
              }
              console.log(tmp, 'tmp');
              return tmp;
            });
            timeArray.unshift('数据时标--写入时间');
          }
          let propsData: QcUnifyTransToChildProps = {
            moduleName: modalTitle,
            timeArray: timeArray.join('\n'),
            operateString: '查看',
          };
          openTimeArrayModal(true, propsData);
        }
      }

      /**
       * 返回准点率到报率计算的百分比
       * @param key
       */
      function returnPercentage(key) {
        let result = '';
        if (props.statisticsResult?.recordsts['duecount'] == 0) return '--';
        if (
          props.statisticsResult !== null &&
          props.statisticsResult.recordsts !== null &&
          props.statisticsResult.recordsts[key]
        ) {
          if (key === 'ratests') {
            result = (
              (props.statisticsResult.recordsts['realcount'] /
                props.statisticsResult.recordsts['duecount']) *
              100
            ).toFixed(2);
          } else {
            result = (
              ((props.statisticsResult.recordsts['duecount'] -
                props.statisticsResult.recordsts['lostcount'] -
                props.statisticsResult.recordsts['mistimecount']) /
                props.statisticsResult.recordsts['duecount']) *
              100
            ).toFixed(2);
          }
          if (result === '100.00' || result === '0.00') {
            result = Number(result).toFixed(0);
          }
          console.log(result, '百分率');
          return result;
        } else {
          return '--';
        }
      }
      /**
       * 返回准点率到报率的样式
       * @param key
       */
      function returnPercentageStyle(key) {
        let result = 0;
        if (
          props.statisticsResult !== null &&
          props.statisticsResult.recordsts !== null &&
          props.statisticsResult.recordsts[key] &&
          props.statisticsResult.recordsts['duecount'] > 0
        ) {
          if (key === 'ratests') {
            result =
              props.statisticsResult.recordsts['realcount'] /
              props.statisticsResult.recordsts['duecount'];
          } else {
            result =
              props.statisticsResult.recordsts['ontimecount'] /
              props.statisticsResult.recordsts['duecount'];
          }
          if (result === 0) return { color: 'red' };
          if (result < 1) return { color: '#FF5900' };
        }
        return { color: 'black' };
      }
      /**
       * 是否出现鼠标悬浮的hand样式(误点条数和缺失条数)
       * @param key
       */
      function returnHoverHand(key) {
        if (
          props.statisticsResult !== null &&
          props.statisticsResult.recordsts !== null &&
          props.statisticsResult.recordsts[key]
        ) {
          if (key === 'ratests') {
            /**
             * 对应的是缺失条数
             */
            if (props.statisticsResult.recordsts['lostcount'] > 0) return { cursor: 'pointer' };
            return;
          } else {
            /**
             * 对应的是误点条数
             */
            if (props.statisticsResult.recordsts['mistimecount'] > 0) return { cursor: 'pointer' };
            return;
          }
        } else {
          return;
        }
      }
      watch(
        () => props.statisticsResult,
        (newVal) => {
          setAllTableData(newVal);
        },
      );
      onMounted(() => {
        setAllTableData(props.statisticsResult);
      });
      return {
        returnPercentage,
        returnHoverHand,
        openTimeDataModal,
        returnPercentageStyle,
        registerTableDataValue,
        registerTimeArrayModal,
        openTimeArrayModal,
        setAllTableData,
        // registerTableDataRecord,
      };
    },
  });
</script>
